<template>
  <div>
    <div>
      <el-form class="form-container" :model="form">
        <el-form-item label="关键字" label-width="60px" style="width: 280px;" inline>
          <el-input placeholder="请输入姓名|手机号码|工号等关键字" v-model="form.keyword"></el-input>
        </el-form-item>
        <el-form-item label="状态" label-width="60px">
          <el-radio-group v-model="form.status">
            <el-radio-button label="不限" value="0"/>
            <el-radio-button label="正常" value="1"/>
            <el-radio-button label="停用" value="2"/>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: right;margin-bottom: 2px;">
      <el-button type="primary" :icon="Plus" title="创建用户" @click="showCreateDialog"></el-button>
    </div>
    <el-table :data="tableData" stripe border style="width: 100%" class="el-table" :highlight-current-row="true"
              empty-text="未查询到任何用户数据">
      <el-table-column label="序号" header-align="center" width="60" align="right">
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" header-align="center" width="100"/>
      <el-table-column prop="code" label="工号" header-align="center" width="100"/>
      <el-table-column prop="sex" label="性别" header-align="center" align="center" width="50">
        <template #default="scope">
          <span v-if="1==scope.row.sex">
            <span style="color: blue">男</span>
          </span>
          <span v-else-if="2==scope.row.sex">
            <span style="color: orangered">女</span>
          </span>
          <span v-else>
            <span style="color: gold;">未知</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="userType" label="用户类型" header-align="center" align="center" width="100">
        <template #default="scope">
					<span v-if="1==scope.row.userType">
						<span>超级管理员</span>
					</span>
          <span v-else-if="2==scope.row.userType">
						<span>普通用户</span>
					</span>
          <span v-else>
						<span style="color: gold;">未知</span>
					</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" header-align="center" align="center" width="100">
        <template #default="scope">
          <span v-if="1==scope.row.status">
            <span style="color: blue">使用中</span>
          </span>
          <span v-else-if="2==scope.row.status">
            <span style="color: orangered">已停用</span>
          </span>
          <span v-else>
            <span style="color: gold;">未知</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="roles" label="角色" header-align="center">
        <template #default="scope">
          <span v-for="role in scope.row.roles">
            <el-button type="success" text bg style="margin-left: 10px"> {{ role }}</el-button>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" header-align="center" width="200">
        <template #default="scope">
          <el-button type="primary" :icon="Setting" title="设置角色"
                     @click="showRoleSettingsDialog(scope.$index)"></el-button>
          <el-button type="info" :icon="ZoomIn" title="详情" color="green"
                     @click="showDetailsDialog(scope.$index)"></el-button>
          <el-button type="primary" :icon="Edit" title="修改" @click="showModifyDialog(scope.$index)"></el-button>
          <el-button type="danger" :icon="Delete" title="删除" @click="deleteStudent(scope.$index)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <PaginationUI :total="100"></PaginationUI>
    <!-- 创建用户对话框 -->
    <CreateDialog ref="createDialog"></CreateDialog>
    <!-- 修改用户对话框 -->
    <ModifyDialog ref="modifyDialog"></ModifyDialog>
    <!-- 显示用户详细信息-->
    <DetailsDialog ref="detailsDialog"></DetailsDialog>
    <!-- 角色设置对话框 -->
    <RoleSettings ref="roleSettings" @reset-roles="restRoles"></RoleSettings>
  </div>
</template>

<script setup>
//导入图标
import {Delete, Edit, Plus, Search, ZoomIn, Setting} from '@element-plus/icons-vue';
import {ref} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus'
//创建用户对话框
import CreateDialog from './CreateDialog.vue';
//修改用户对话框
import ModifyDialog from './ModifyDialog.vue';
//显示用户详细信息
import DetailsDialog from './DetailsDialog.vue';
//导入分页查询的控件
import PaginationUI from "@views/common/PaginationUI.vue"
//导入角色设置对话框
import RoleSettings from './RoleSettings.vue';
//查询表单响应数据
const form = ref({
  level: '0',
  status: '0',
  keyword: ''
});
let currentIndex = ref(-1);
//当前删除记录索引
// ... existing code ...
// ... existing code ...
// ... existing code ...
const tableData = ref([{
  userId: 1,
  name: '王强',
  code: 'S001',
  mobile: '13800000000',
  email: 'wang138@163.com',
  sex: 1,
  age: 20,
  status: 1,
  userType: 1,//1:超级管理员;2:普通用户
  createTime: '2025-04-01 10:23:00',
  roles: ['商品管理员', '客户人员'] //角色
},
  {
    userId: 2,
    name: '李娜',
    code: 'S002',
    mobile: '13800000001',
    email: 'li138@163.com',
    sex: 2,
    age: 25,
    status: 1,
    userType: 2,
    createTime: '2025-04-02 09:15:00',
    roles: ['订单管理员']
  },
  {
    userId: 3,
    name: '张伟',
    code: 'S003',
    mobile: '13800000002',
    email: 'zhang138@163.com',
    sex: 1,
    age: 28,
    status: 1,
    userType: 2,
    createTime: '2025-04-03 14:30:00',
    roles: ['运营人员', '商品管理员']
  },
  {
    userId: 4,
    name: '陈丽',
    code: 'S004',
    mobile: '13800000003',
    email: 'chen138@163.com',
    sex: 2,
    age: 22,
    status: 2,
    userType: 2,
    createTime: '2025-04-04 11:45:00',
    roles: ['客户人员', '订单管理员', '商品管理员']
  },
  {
    userId: 5,
    name: '刘洋',
    code: 'S005',
    mobile: '13800000004',
    email: 'liu138@163.com',
    sex: 1,
    age: 30,
    status: 1,
    userType: 2,
    createTime: '2025-04-05 16:20:00',
    roles: ['运营人员']
  },
  {
    userId: 6,
    name: '赵敏',
    code: 'S006',
    mobile: '13800000005',
    email: 'zhao138@163.com',
    sex: 2,
    age: 26,
    status: 1,
    userType: 2,
    createTime: '2025-04-06 08:40:00',
    roles: ['商品管理员', '运营人员', '客户人员']
  },
  {
    userId: 7,
    name: '孙浩',
    code: 'S007',
    mobile: '13800000006',
    email: 'sun138@163.com',
    sex: 1,
    age: 32,
    status: 2,
    userType: 2,
    createTime: '2025-04-07 13:10:00',
    roles: ['订单管理员', '运营人员']
  },
  {
    userId: 8,
    name: '周婷',
    code: 'S008',
    mobile: '13800000007',
    email: 'zhou138@163.com',
    sex: 2,
    age: 24,
    status: 1,
    userType: 2,
    createTime: '2025-04-08 10:55:00',
    roles: ['客户人员']
  },
  {
    userId: 9,
    name: '吴磊',
    code: 'S009',
    mobile: '13800000008',
    email: 'wu138@163.com',
    sex: 1,
    age: 27,
    status: 1,
    userType: 2,
    createTime: '2025-04-09 15:25:00',
    roles: ['商品管理员', '订单管理员', '运营人员', '客户人员']
  },
  {
    userId: 10,
    name: '郑佳',
    code: 'S010',
    mobile: '13800000009',
    email: 'zheng138@163.com',
    sex: 2,
    age: 29,
    status: 1,
    userType: 2,
    createTime: '2025-04-10 12:05:00',
    roles: ['订单管理员', '客户人员']
  }]);
// ... existing code ...
// ... existing code ...
// ... existing code ...
let createDialog = ref(null);
let modifyDialog = ref(null);
let detailsDialog = ref(null);
//角色设置对话框
let roleSettings = ref(null);
//打开角色设置对话框
const showRoleSettingsDialog = (rowIndex) => {
  currentIndex.value = rowIndex;
  roleSettings.value.dialogVisible = true;
  console.info(tableData.value[rowIndex].roles);
  console.info(roleSettings.value.form)
  roleSettings.value.form.roles = tableData.value[rowIndex].roles;
}
//重置设置角色
const restRoles = (roles) => {
  tableData.value[currentIndex.value].roles = roles;
}
//打开删除用户对话框
const deleteStudent = (rowIndex) => {
  let student = tableData.value[rowIndex];
  ElMessageBox.confirm(`确认要删除用户【${student.name}】的信息吗?`, '删除用户',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    // 用户点击了“确定”
    tableData.value.splice(rowIndex, 1);
    ElMessage({message: '删除成功', type: 'success'});
  })
      .catch(() => {
        // 用户点击了“取消”
        ElMessage({message: '已取消删除', type: 'info'});
      });
}
//打开修改用户对话框
const showModifyDialog = (rowIndex) => {
  modifyDialog.value.dialogVisible = true;
  modifyDialog.value.form = tableData.value[rowIndex];
}
//打开显示详细信息对话框
const showDetailsDialog = (rowIndex) => {
  detailsDialog.value.dialogVisible = true;
  detailsDialog.value.student = tableData.rowIndex[rowIndex];
}
//打开创建用户对话框
const showCreateDialog = () => {
  createDialog.value.dialogVisible = true;
}
</script>
<style scoped>
.form-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;

}

.inline-form-item {
  margin-left: 20px;
}
</style>